<template>
  <h1>可以在vif，也可又在route-view路由视图中</h1>
  <button @click="show = !show">toggle</button> {{show}}
  <keep-alive>
    <KeepAliveList v-if="show"/>
  </keep-alive>
</template>

<script>
import { createApp, ref, reactive, computed, onMounted, onUnmounted } from 'vue';
const KeepAliveList = {
  template: `  <div>
    <button @click="add">next arr</button>
  </div>
  <div>
    <ul>
      <li v-for="i in arr">{{i}}</li>
    </ul></div>
  <div><router-link to="/">Go Home</router-link></div>
  `,
  name: "KeepAliveExample",
  setup() {
    let arr = ref([1, 2, 3, 4, 5]);
    const add = () => arr.value = arr.value.map(e => e + 5);
    return {arr, add}
  }
}
export default {
  name: "KeepAliveExample",
  components: {KeepAliveList},
  data() {
    return {show: true}
  }
}
</script>
